<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>todoList</title>
        <style>
            #app{
                display: flex;
                justify-content: center;
                flex:1;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <form style="width:20%" @submit.prevent="registerUser">
                <label for="name">姓名:</label>
                <input id="name" type="text" v-model.lazy="form.name"/><br/>
                    <label for="email">邮箱:</label>
                    <input id="email" type="text" v-model.trim="form.email"/><br/>
                        <label for="password">密码:</label>
                        <input id="password" type="password"
                            v-model="form.password"/><br/>
                            <label for="age">年龄:</label>
                            <input id="age" type="text"
                                v-model.number="form.age"/><br/>
                                <label for="gender">性别:</label>
                                <input type="radio" id="male" value="male"
                                    v-model="form.gender"><label>男</label>
                                <input type="radio" id="female" value="female"
                                    v-model="form.gender"><label>女</label><br/>
                                    <label for="country">国家:</label>
                                    <select v-model="form.country">
                                        <option v-for="country in countries"
                                            :value="country.value">{{country.name}}</option>
                                    </select><br/>
                                        <label for="hobbies">爱好:</label>
                                        <template v-for="hobby in hobbies">
                                            <input
                                                type="checkbox"
                                                :id="hobby.value"
                                                :value="hobby.value"
                                                v-model="form.hobbies">
                                            <label :for="hobby.value">{{hobby.name}}</label>
                                        </template>
                                        <label for="intro">个人介绍:</label>
                                        <textarea v-model="form.intro"></textarea><br/>
                                            <button type="submit">注册</button>
                                        </form>
                                        <div>
                                            <p>姓名:{{form.name}}</p>
                                            <p>邮箱:{{form.email}}</p>
                                            <p>密码:{{form.password}}</p>
                                            <p>年龄:{{form.age}}</p>
                                            <p>性别:{{form.gender}}</p>
                                            <p>国家:{{form.country}}</p>
                                            <p>爱好:{{form.hobbies.join(',')}}</p>
                                            <p>个人介绍:{{form.intro}}</p>
                                        </div>
                                    </div>
                                    <script src="vue.js"></script>
                                    <script>
        const countries = [
            {value:'cn',name:'中国'},
            {value:'us',name:'美国'},
            {value:'uk',name:'英国'}
        ]   
        const hobbies = [
            {value:'football',name:'足球'},
            {value:'basketball',name:'篮球'},
            {value:'baseball',name:'棒球'}
        ]   
        var vm = new Vue({
            el:'#app',
            data:{
               countries,
               hobbies,
               form:{
                name:'',//姓名
                age:18,//年龄
                email:'',//邮箱
                password:'',//密码
                gender:'male',//性别
                country:'cn',//国家
                hobbies:[],//爱好
                intro:'',//个人介绍
               }
            },
            methods:{
                registerUser(){
                    console.log(this.form)
                }
            },
            computed:{
               
            },
            watch:{
               
            }
        });
    </script>
                                </body>
                            </html>